<template>
  <div class="app-container">
    <el-form :model="searchForm" class="demo-form-inline">
      <el-row>
        <el-col :span="6">
          <el-form-item label="选择城市" label-width="80px">
            <el-select
              v-model="searchForm.query.city"
              filterable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in cityList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="经纬度" label-width="80px">
            <el-input
              v-model="searchForm.query.location"
              placeholder="经纬度，以逗号分割"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="关键词" label-width="80px">
            <el-autocomplete
              class="input"
              v-model="searchForm.query.suggestValue"
              :fetch-suggestions="querySearch"
              placeholder="请输入关键字"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      :default-sort="{ prop: 'storeSize', order: 'descending' }"
      @sort-change="sortChange"
      empty-text="没有数据"
      style="width: 100%"
    >
      <el-table-column prop="pic" label="图片" fixed> </el-table-column>
      <el-table-column prop="title" fixed label="酒店名称"> </el-table-column>
      <el-table-column prop="businessDistrict" fixed label="商业区">
      </el-table-column>
      <el-table-column prop="address" fixed label="地址"> </el-table-column>
      <el-table-column prop="lon" label="经度"> </el-table-column>
      <el-table-column prop="lat" label="纬度"> </el-table-column>
      <el-table-column prop="city" label="城市"> </el-table-column>
      <el-table-column prop="price" sortable label="价格"> </el-table-column>
      <el-table-column prop="star" sortable label="星级"> </el-table-column>
      <el-table-column
        prop="fullRoom"
        label="满房状态"
        sortable
        :formatter="fullRoomFormat"
      >
      </el-table-column>
      <el-table-column prop="impression" label="印象" sortable>
      </el-table-column>
      <el-table-column prop="favourablePercent" label="好评率" sortable>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      style="margin-top: 10px"
      layout="sizes, prev, pager, next"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="searchForm.size"
      :total="searchForm.total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { allcity, search, sugsearch } from "@/api/hotel";

export default {
  name: "hotellist",
  components: {},
  data() {
    return {
      tableData: [],
      searchForm: {
        query: {
          title: "",
        },
        from: 0,
        size: 10,
      },
      formVisible: false,
      suggestList: [],
      cityList: [],
    };
  },
  created() {
    this.citylist();
    this.searchlist();
  },
  methods: {
    citylist() {
      this.cityList = [];
      const _self = this;
      allcity().then((res) => {
        console.log(res);
        res.data.forEach((item) => {
          _self.cityList.push({ label: item, value: item });
        });
      });
    },
    searchlist() {
      search(this.searchForm).then((res) => {
        this.tableData = res.data.data;
        this.searchForm.total = parseInt(res.data.total);
      });
    },
    sortChange({ column, prop, order }) {},
    onSearch() {
      this.searchlist();
    },
    refresh() {
      this.getList();
    },
    fullRoomFormat(row, column, cellValue, index) {
      if (cellValue == "false") {
        return "未满";
      }
      return "已满";
    },
    handleCurrentChange(val) {
      this.searchForm.from = val;
      this.onSearch();
    },
    handleSizeChange(val) {
      this.searchForm.size = val;
      this.onSearch();
    },
    querySearch(val, cb) {
      let list = [];
      if (val) {
        sugsearch({ prefix: val }).then((res) => {
          res.data.forEach(item=>{
            list.push({value:item})
          })
        });
      }
      cb(list)
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
